<template>
  <div>
    <vxe-toolbar setting>
      <template v-slot:buttons>
        <el-button @click="insertEvent">新增</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table ref="xTable" class="vxe-table-element" border auto-resize show-overflow :data.sync="tableData">
      <vxe-table-column field="sso" title="账号"></vxe-table-column>
      <vxe-table-column field="name" title="用户名"></vxe-table-column>
      <vxe-table-column title="操作" fixed="right">
        <template v-slot="{ row }">
          <vxe-button @click="removeRowEvent(row)">删除</vxe-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body>
      <template slot="title">
        <i class="el-icon-setting"></i>{{dialogTitle}}
      </template>
      <candidate-user-cfg @close="closeDialog"></candidate-user-cfg>
    </el-dialog>
  </div>
</template>
<script>
import CandidateUserCfg from "./CandidateUserCfg";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  components: {
    CandidateUserCfg
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogTitle: "添加用户"
    };
  },
  computed: {
    ...mapGetters(["selectedUsers"])
  },
  watch: {
    selectedUsers: {
      deep: true,
      handler(val, oldVal) {
        this.refreshTableData(val);
      }
    }
  },
  methods: {
    ...mapActions(["delSelectedUsers", "initSelectedUsers"]),
    refreshTableData(val) {
      this.tableData = val;
    },
    loadUsers() {
      let candidateUsers = this.$store.state.selectedTask.candidateUsers;
      this.initSelectedUsers(candidateUsers);
    },
    insertEvent() {
      this.dialogVisible = true;
    },
    removeRowEvent(row) {
      this.delSelectedUsers(row);
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  },
  mounted() {
    this.loadUsers();
  }
};
</script>
